<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '我发布的',
  },
}
</route>
<template>
  <view class="bg-#f6f6f6 w-screen overflow-hidden min-h-100vh box-border px-20rpx py-10rpx">
    <wd-row :gutter="10">
      <wd-col :span="12">
        <view class="mb-20rpx" v-for="(item, index) in listLeft" :key="index">
          <image
            v-if="item && item.fileDOList && item.fileDOList.length != 0"
            class="w-100% h-400rpx published-img"
            :src="item.fileDOList[0].url"
            @click="detailProducts(item.id)"
          ></image>
          <view class="bg-#fff w-100% py-20rpx box-border">
            <view @click="detailProducts(item.id)">
              <view class="title ellipsis-3 px-20rpx">
                {{ item.remark }}
              </view>
              <view
                class="px-20rpx flex mb-10rpx mt-6rpx"
                v-if="item && item.tag"
                style="flex-wrap: wrap"
              >
                <view class="mr-10rpx" v-for="(item2, index) in item.tag" :key="index">
                  <wd-tag
                    style="min-width: 40rpx; font-size: 18rpx; text-align: center"
                    color="#F72323"
                    bg-color="#EE2A02"
                    plain
                  >
                    {{ item2 }}
                  </wd-tag>
                </view>
              </view>
            </view>
            <view class="flex items-center justify-between px-20rpx">
              <view>
                <span class="per-money mr-4rpx">{{ item.quantity }}</span>
                <span class="per-capita">Kg</span>
              </view>
              <view class="flex pt-4rpx">
                <view
                  class="bg-#eee py-4rpx px-18rpx text-#101010 border-rd-6rpx text-22rpx mr-8rpx"
                  @click="editProducts(item)"
                >
                  编辑
                </view>
                <view
                  class="bg-#eee py-4rpx px-18rpx text-#101010 border-rd-6rpx text-22rpx"
                  @click="deleteProducts(item.id)"
                >
                  删除
                </view>
              </view>
            </view>
          </view>
        </view>
      </wd-col>
      <wd-col :span="12">
        <view class="mb-20rpx" v-for="(item, index) in listRight" :key="index">
          <image
            v-if="item && item.fileDOList && item.fileDOList.length != 0"
            class="w-100% h-400rpx published-img"
            :src="item.fileDOList[0].url"
            @click="detailProducts(item.id)"
          ></image>
          <view class="bg-#fff w-100% py-20rpx box-border">
            <view @click="detailProducts(item.id)">
              <view class="title ellipsis-3 px-20rpx">
                {{ item.remark }}
              </view>
              <view
                class="px-20rpx flex mb-10rpx mt-6rpx"
                v-if="item && item.tag"
                style="flex-wrap: wrap"
              >
                <view class="mr-10rpx" v-for="(item2, index) in item.tag" :key="index">
                  <wd-tag
                    style="min-width: 40rpx; font-size: 18rpx; text-align: center"
                    color="#F72323"
                    bg-color="#EE2A02"
                    plain
                  >
                    {{ item2 }}
                  </wd-tag>
                </view>
              </view>
            </view>
            <view class="flex items-center justify-between px-20rpx">
              <view>
                <span class="per-money mr-4rpx">{{ item.quantity }}</span>
                <span class="per-capita">Kg</span>
              </view>
              <view class="flex pt-4rpx">
                <view
                  class="bg-#eee py-4rpx px-18rpx text-#101010 border-rd-6rpx text-22rpx mr-8rpx"
                  @click="editProducts(item)"
                >
                  编辑
                </view>
                <view
                  class="bg-#eee py-4rpx px-18rpx text-#101010 border-rd-6rpx text-22rpx"
                  @click="deleteProducts(item.id)"
                >
                  删除
                </view>
              </view>
            </view>
          </view>
        </view>
      </wd-col>
    </wd-row>
    <wd-loadmore v-if="list.length > 0" :state="state" @reload="loadmore" />
    <wd-status-tip v-if="max == 0" image="content" tip="暂无内容" />
  </view>
</template>

<script lang="ts" setup>
import * as getApi from '../../service/FruitMarket/index'
import { useUserStore } from '@/store'
import { useToast } from 'wot-design-uni'
const baseurl = ref(import.meta.env.VITE_SERVER_BASEURL)
const state = ref<string>('loading')
const max = ref<number>(60)
const toast = useToast()
const userStore = useUserStore()
const userId = computed(() => userStore.userInfo.userId)
// 获得特色鲜果分页
const list = ref([])
const listLeft = ref([])
const listRight = ref([])
const freshFruit = reactive({
  pageNo: 1,
  pageSize: 10,
  remark: '',
  demand: '',
})
async function getFreshFruit() {
  const data: any = await getApi.getfreshFruitMyPage({ ...freshFruit }, { UserId: userId.value })
  list.value.push(...data.data.list)
  max.value = data.data.total
  data.data.list.forEach((item) => {
    if (item.tag) {
      item.tag = item.tag.split(',')
    }
    if (item.fileDOList) {
      item.fileDOList = item.fileDOList.reverse().map((item) => {
        item.url = `${baseurl.value}${item.url}`
        return item
      })
    }
  })
  list.value.length === max.value ? (state.value = 'finished') : (state.value = 'loading')
  // 分割 list 到 listLeft 和 listRight
  listLeft.value = []
  listRight.value = []
  list.value.forEach((item, index) => {
    if (index % 2 === 0) {
      listLeft.value.push(item)
    } else {
      listRight.value.push(item)
    }
  })
}
// 编辑鲜果
const editProducts = (item) => {
  const itemString = encodeURIComponent(JSON.stringify(item))
  uni.navigateTo({
    url: `/pages/FruitMarket/addProducts?data= ${itemString}&type=${'edit'}`,
  })
}
// 删除鲜果
const deleteProducts = async (id) => {
  const params = {
    ids: id,
  }
  uni.showModal({
    title: '提示',
    content: '您确定要删除这个需求吗？',
    success: async (res) => {
      if (res.confirm) {
        // 用户点击确定
        const data = await getApi.deletefreshFruit({ ...params })
        if (data.data) {
          toast.success('删除成功！')
          handleQuery()
        } else {
          toast.error('删除失败！')
        }
      } else if (res.cancel) {
        toast.info('已取消删除！')
      }
    },
  })
}
// 鲜果详情
const detailProducts = (id) => {
  uni.navigateTo({
    url: '/pages/FruitMarket/productDetails?id=' + id,
  })
}
/** 查询按钮操作 */
const handleQuery = () => {
  freshFruit.pageNo = 1
  list.value = []
  listLeft.value = []
  listRight.value = []
  max.value = 60
  getFreshFruit()
}

onShow(() => {
  freshFruit.pageNo = 1
  list.value = []
  listLeft.value = []
  listRight.value = []
  getFreshFruit()
  uni.$on('refreshPage', refreshPage)
})
onUnload(() => {
  uni.$off('refreshPage', refreshPage)
})
function refreshPage() {
  list.value = []
  getFreshFruit()
}
function loadmore() {
  state.value = 'loading'
  setTimeout(() => {
    getFreshFruit()
  }, 1000)
}
onReachBottom(() => {
  if (list.value.length === max.value) {
    state.value = 'finished'
  } else if (list.value.length < max.value) {
    freshFruit.pageNo += 1
    loadmore()
  }
})
</script>
<style lang="scss" scoped>
::v-deep .wd-tag__text {
  display: block !important;
  min-height: 14px;
  padding: 4rpx !important;
  line-height: 14px;
}

::v-deep .wd-tag {
  display: block !important;
  margin-top: 10rpx !important;
  border-radius: 8rpx;
}
.published-img {
  border-radius: 14rpx;
}
.title {
  font-size: 28rpx;
  font-weight: 500;
  line-height: 20px;
  color: #111111;
  text-align: justify;
}
.per-money {
  display: inline-block;
  font-size: 30rpx;
  font-weight: 500;
  color: #f72323;
  vertical-align: bottom;
}
.per-capita {
  display: inline-block;
  font-size: 24rpx;
  font-weight: 500;
  color: rgba(123, 123, 123, 1);
}
.failure-reason {
  font-size: 26rpx;
  line-height: 38rpx;
  color: rgba(196, 15, 15, 1);
  text-align: justify;
}
</style>
